<template>
  <view class="echarts-wrap" style="height: 520rpx">
    <mpvue-echarts
      @onInit="lineInit1"
      canvasId="category2"
      ref="lineChart1"
      @sendImg="sendImg"
    />
    <image v-if="tempFilePath" :src="tempFilePath" class="imgCanvas"></image>
  </view>
</template>

<script>
import * as echarts from "../../../../echarts/echarts.min5.2.0.js";
import mpvueEcharts from "../../../../echarts/imageEcharts.vue";
let lineOptionA = {
  type: "category",
  animation: false,
  color: ["#066BFF"],
  barWidth: 18,
  // legend: {
  //   data: ["职位动态数"],
  //   bottom: "1%",
  //   textStyle: {
  //     color: "#333",
  //     fontSize: 14,
  //     lineHeight: 18,
  //   },
  //   itemHeight: 10,
  // },
  grid: {
    x: 60,
    x2: 15,
    y: 30,
    y2: 65,
  },
  calculable: false,
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC", //color: "#BBC7DC",
          lineHeight: 14,
          align: 'left', // 设置字体左对齐
          padding: [0, 0, 0, -24],//表示 [上, 右, 下, 左] 的边距。, // 根据需要调整标签位置，这里向左移动50个像素
        },
        interval: 0,
        // rotate: 45,
        formatter: function (params) {
          let newParamsName = "";
          const paramsNameNumber = params.length; // 文字总长度
          const provideNumber = 4; //一行显示几个字
          const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (let p = 0; p < rowNumber; p++) {
              const start = p * provideNumber;
              const end = start + provideNumber;
              const tempStr =
                p === rowNumber - 1
                  ? params.substring(start, paramsNameNumber)
                  : params.substring(start, end) + "\n";
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
    },
  ],
  series: [
    {
      name: "月薪",
      type: "bar",
      smooth: true,
      symbol: "none",
      label: {
        show: true,
        position: "top", // 或者 top
        formatter: "￥{c}", // 显示当前 y 轴的值
        offset: [0, -5],
        color: "#0169FF",
        fontWeight: "bold",
        fontFamily: "PingFang-SC-Heavy, PingFang-SC",
        fontSize: 11, // 设置字号为 12px
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#589BFD" },
          { offset: 1, color: "#BBDEFF" },
        ]),
        // 配置柱状图的圆角
        barBorderRadius: [3, 3, 0, 0],
      },
      data: [],
    },
  ],
};
export default {
  components: {
    mpvueEcharts,
  },
  props: {
    salaryWorkYearChart: {
      type: Object,
      default: () => {},
    },
    showRegion: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lineOption1: { ...lineOptionA },
      tempFilePath: null,
    };
  },
  mounted() {
    this.chartCreate();
  },
  methods: {
    sendImg(img) {
      this.tempFilePath = img;
    },
    chartCreate(val) {
      if (val && val.dataX) {
        this.lineOption1.xAxis[0].data = val.dataX;
        this.lineOption1.series[0].data = val.dataY;
        this.$refs.lineChart1.init();
      }
    },
    lineInit1(e) {
      let { width, height } = e;
      let canvas = this.$refs.lineChart1.canvas;
      echarts.setCanvasCreator(() => canvas);
      let lineChart1 = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(lineChart1);
      lineChart1.setOption(this.lineOption1);
      lineChart1.resize();
      lineChart1.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 3,
        position: ["50%", "10%"],
      });
      this.$refs.lineChart1.setChart(lineChart1);
      return lineChart1;
    },
  },
  watch: {
    salaryWorkYearChart: {
      handler(val) {
        this.chartCreate(val);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
  z-index: 0;
  position: relative;
}

.imgCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
